<template>
  <div class="common-layout" style="width: 1600px;margin: 0 auto ">
    <el-container style="width: 80%;">
      <div style="width: 1600px;margin: 0 auto ">
        <div style="height: 200px">
        <el-header style="padding: 0;height: 20vh">
        <div class="nav-top" style="height:40px;width:100%;background-color: #EAEAEA; margin: 0;line-height: 40px">
          <el-row :gutter="100" style="font-size: 12px;">
            <el-col :span="16"><span style="color: #7F7F7F;margin-left: 70px;margin-top: 10px">电子商城欢迎您！</span></el-col>
            <el-col :span="8" >
              <router-link to="/" style="color: #7F7F7F;text-decoration: none"><span>网站首页</span></router-link>
              <router-link to="/personalCenter" style="color: #7F7F7F;text-decoration: none"><span>个人中心</span></router-link>
              <router-link to="/cart" style="color: #7F7F7F;text-decoration: none"><span>购物车</span></router-link>
              <router-link to="/myOrder" style="color: #7F7F7F;text-decoration: none"><span>我的订单</span></router-link>
              <router-link to="" style="color: #7F7F7F;text-decoration: none"><span>商城后台管理</span></router-link>
            </el-col>
          </el-row>
        </div>
        <div class="top" style="height: 15vh;">
          <el-row :gutter="10">
            <el-col :span="4"><img src="b.png" style="height: 150px;margin-left: 100px;margin-top: 5px"></el-col>
            <el-col :span="7"></el-col>
            <el-col :span="13" >
              <el-input placeholder="搜索关键词" :prefix-icon="Search" style="width:500px;height:40px;font-family: ArialMT, Arial, sans-serif;border:pink ;margin-top: 40px">
              </el-input>
              <el-button style="margin-top: 40px;height:40px;">搜索</el-button>
            </el-col>
<!--            <el-col :span="3" ></el-col>-->
          </el-row>
        </div>
      </el-header>
        </div>
        <div class="nav-r" style="width: 80px;height: 260px;background-color:#EAEAEA;position: fixed;top: 50%;right: 0;transform: translateY(-50%);z-index: 99;opacity: 80%;text-align: center">
          <ul class="guide-list" style="position: relative;list-style: none;height: 54px;width: 70px;right: 30px;top: 15px">
            <li style="margin-bottom: 15px">
              <router-link to="/personalCenter" style="text-decoration: none;color: #7F7F7F;"><img src="nav-r1.png" width="30px"><br>
                <span>个人中心</span></router-link>
            </li>
            <li style="margin-bottom: 15px">
              <router-link to="/cart" style="text-decoration: none;color: #7F7F7F;"><img src="nav-r3.png" width="30px"><br>
              <span>购物车</span></router-link>
            </li>
            <li style="margin-bottom: 5px">
             <a href="#" style="text-decoration: none;color: #7F7F7F"><img src="nav-r2.png" width="30px"><br>
                <span>回到顶部</span></a>
            </li>

          </ul>
        </div>
      <el-main style="width: 100%;padding: 0 0 "><router-view/></el-main>
      <el-footer
          style="color: #666;height:300px;padding: 0;width: 100%">
        <div style="width: 1450px;margin: 50px auto">
          <el-row :gutter="10">
            <el-col :span="12">
              <el-row :gutter="10" style="margin-left: 70px">
                <div style="width: 100px;"><span>关于我们</span></div>
                <div style="width: 100px;"><span>联系我们</span></div>
                <div style="width: 100px;"><span>购物指南</span></div>
                <div style="width: 100px;"><span>退换货指南</span></div>
                <div style="width: 100px;"><span>商家入驻</span></div>
              </el-row>
              <el-row :gutter="10" style="margin-left: 70px">
                <div style="font-size: 13px">
                  <p><span>© 2020-2099  shumashop.com All Rights Reserved</span></p>
                  <p><span>违法和不良信息举报电话：12377</span></p>
                  <p><span>粤公网安备 23012345000xxx号</span></p>
                  <p><span>粤ICP备230012xxx号 -1</span></p>
                </div>
              </el-row>
            </el-col>
            <el-col :span="7" id="footrt-center">
              <el-row :gutter="10">
                <el-col :span="12">
                  <img src="xiaochengxu.png" width="130px" height="130px">
                  <el-row>
                    <span style="font-weight: bold;margin-left: 20px">商城小程序</span>
                  </el-row>
                </el-col>
                <el-col :span="12">
                  <img src="erweima.png" width="130px" height="130px">
                  <el-row>
                    <span style="font-weight: bold;margin-left: 5px">关注微信公众号</span>
                  </el-row>
                </el-col>
              </el-row>
            </el-col>
            <el-col :span="5">
              <el-row>
                <img src="phone.svg" width="50px" style="margin-left: 40px">
              </el-row>
              <el-row>
                <div style="width: 130px;font-size: 13px;text-align: center">
                  <p><span>全国热线</span></p>
                  <p><span>400-123-4xxx</span></p>
                  <p><span>服务时间：9:00-21:00</span></p>
                </div>
              </el-row>
            </el-col>
          </el-row>
        </div>
      </el-footer>
      </div>
    </el-container>
  </div>

</template>

<script setup>
import { Search } from '@element-plus/icons-vue'

</script>
<style>
.nav-top span {
  margin-right: 30px;
}

</style>
